<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基础高德离线地图</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/leaflet/leaflet.css}" rel="stylesheet"/>
    <link th:href="@{/leaflet-search/dist/leaflet-search.min.css}" rel="stylesheet"/>
    <link th:href="@{/leaflet-locatecontrol-gh-pages/src/L.Control.Locate.scss}" rel="stylesheet"/>
</head>
<body>

<!--定义一个DIV作为地图的容器，并设置wdith,height-->
<div id="map" style="width:1920px; height: 1080px;">

</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/leaflet/leaflet-src.js}"></script>
<script th:src="@{/leaflet-search/dist/leaflet-search.min.js}"></script>
<script th:src="@{/leaflet-locatecontrol-gh-pages/src/L.Control.Locate.js}"></script>
<script th:src="@{/echarts/echarts-all.js}"></script>
<script th:src="@{/js/main.min.js}"></script>

<script type="text/javascript" th:inline="none">


    /*1.地图初始化*/
    var url = 'http://localhost:80/map/{z}/{x}/{y}.png';
    var map = L.map('map').setView([36.8137, 118.0453], 16);   //37.550339, 104.114129 北京      36.8137, 118.0453 淄博
    L.tileLayer(url, {
        attribution: '高德普通地图',
        minZoom: 1,
        maxZoom: 16,  //缩放（下载的地图级别为15，所以最大缩放为15；没有下载14级别的地图，所以点一下缩小，找不到图片）
        crs: L.CRS.EPSG3857,   //要使用的坐标参考系统，默认的坐标参考系,互联网地图主流坐标系  可不设置
        zoomSnap: 0.5,
        zoomControl: true,
    }).addTo(map);


   /* /!*2.地图标记功能*!/
    var marker = L.marker([36.847792, 117.860041]).addTo(map);
    marker.bindPopup("<b>星志交通!</b><br>").openPopup();*/



    /*4.点击显示经纬度*/
    //监听鼠标点击事件，弹出经纬度
    function onMapClick(e) {
        L.popup().setLatLng(e.latlng)
            .setContent('经纬度'+e.latlng.toString())
            .openOn(map)
    };
    map.on('click',onMapClick);





    /*7.模拟迁徙*/

    var overlay = new L.echartsLayer3(map, echarts);
    var chartsContainer = overlay.getEchartsContainer();
    var myChart = overlay.initECharts(chartsContainer);

    var geoCoordMap = {
        '济南': [117.1170, 36.6464],
        '淄博': [118.0453, 36.8137],
        '东方明珠': [118.0545, 36.8284],
        '莲池中学': [118.0122, 36.8298],
    };
    var ZBData = [
        [{name: '淄博'}, {name: '东方明珠', value: 11}, {name: '莲池中学', value: 12}],
    ];

    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {   //data-->BJData
            debugger
            var dataItem = data[i];     //  拿到BJData中的第一条数据
            var fromCoord = geoCoordMap[dataItem[0].name];  //出发坐标
            var toCoord1 = geoCoordMap[dataItem[1].name];
            var toCoord2 = geoCoordMap[dataItem[2].name];
            if (fromCoord && toCoord1 && toCoord2) {
                res.push([{
                    coord: fromCoord
                }, {
                    coord: toCoord1

                },{
                    coord: toCoord2
                }]);
            }
        }

        return res;
    };

    var color = ['#f1060d', '#ffa022', '#46bee9'];
    var series = [];
    [['淄博', ZBData]].forEach(function (item, i) {
        series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
        );
    });

    option = {
        //backgroundColor: '#404a59',
        title: {
            text: '高德离线地图模拟迁徙',
            subtext: 'Develop By WanderGIS',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['淄博 Top10'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'single'
        },
        geo: {
            map: '',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#404a59'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: series
    };
    // 使用刚指定的配置项和数据显示图表。
    overlay.setOption(option);

</script>
</body>
</html>